<template>
    <fieldset>
        <legend>VUe的基本过度动画</legend>
            <button v-on:click="show = !show">
                Toggle
            </button>
            <transition name="abc">
                <p v-if="show" class="a">hello</p>
            </transition>
    </fieldset>
</template>

<script>
    export default {
        name: "Animation1",
        data:()=>{
            return{
                show:true,
            }
        }
    }
</script>

<style scoped>
/*   注意:*/
/*class名的前缀需要和transition组件的name值属性保持一致*/
/*
在进入/离开的过渡中，会有 6 个 class 切换。
v-enter：进入动画的初始值  0  绿
v-enter-active：进入动画的动画设置
v-enter-to：进入动画的结束值  1 红
v-leave：离开动画初始值       1  红
v-leave-active:整个离开动画的动画设置
v-leave-to：离开动画的结束值  0   绿
*/
    .abc-enter-active {
        transition: all 1s ease-in-out;

    }
.abc-leave-active{
    transition: ease-in-out all 1s;

}
.a{
    height: 300px;
    background-color: darkslateblue;
}
    .abc-enter,.abc-leave-to{
        opacity: 0;
        background-color: brown;
        height: 0;
    }
.abc-enter-to,.abc-leave{
    height: 300px;
             background-color: darkslateblue;
         }

</style>